<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>股票行情</title>
    <!--引入 bootstrap 弹窗的样式 -->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <!--引入 Layer 弹窗的样式 -->
    <link rel="stylesheet" href="/layer/theme/default/layer.css"/>
    <!--引入 angularJS 分页的样式 -->
    <link rel="stylesheet" href="/angularjs/pagination.css">
    <!--引入 jquery 类库 -->
    <script src="/bootstrap/js/jquery.min.js"></script>
    <!--引入 bootstrap 类库 -->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <!--引入 angular 的类库 -->
    <script src="/angularjs/angular.min.js"></script>
    <!--引入 Layer 弹窗的类库 -->
    <script src="/layer/layer.js"></script>
    <!--引入 angularJS 框架分页的类库 -->
    <script src="/angularjs/pagination.js"></script>
    <script src="/echars/echarts.min.js"></script>

    <style>

    </style>
</head>
<body ng-app="app" ng-controller="ctr" ng-init="loadCart();loadUname()">
<div class="container">
    <div class="panel panel-default">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand">股票行情</a>
                </div>
                <ul class="nav navbar-nav navbar-right">

                    <li><a href="#" ng-click="toBuy()"><span class="glyphicon glyphicon-plus"></span> 买入股票</a></a></li>
                    <li><a href="#" ng-click="toSell()"><span class="glyphicon glyphicon-minus"></span> 卖出股票</a></a>
                    </li>
                    <li><a href="#" ng-click="toOrder()"><span class="glyphicon glyphicon-list-alt"></span> 委托订单</a></a>
                    </li>
                    <li><a href="#" ng-click="toWarehouse()"><span class="glyphicon glyphicon-home"></span> 当前持仓</a></a>
                    </li>
                    <li><a href="#" ng-click="toMy()"><span class="glyphicon glyphicon-user"></span> 我的</a></li>
                    <li><a href="#" ng-click="logout()"><span class="glyphicon glyphicon-log-out"></span> 注销</a></li>
                </ul>
            </div>
        </nav>
        <div class="panel-body" >
            <ul class="nav navbar-nav ">
                <li><a href="#" ng-click="change(true)">行情列表</a></a></li>
                <li><a href="#" ng-click="change(false)">K线图</a></a></li>
            </ul>
            <div ng-show="isTrue">
                <table class="table table-striped table-hover table-condensed " >
                    <tr>
                        <td>序号</td>
                        <td>代码</td>
                        <td>名称</td>
                        <td>开盘价</td>
                        <td>当前价</td>
                        <td>涨跌金额</td>
                        <td>涨跌幅度</td>
                        <td>成交量</td>
                        <td>成交金额</td>
                        <td>最高价</td>
                        <td>最低价</td>
                    </tr>
                    <tr ng-repeat="s in slist">
                        <td>{{$index +1}}</td>
                        <td>{{s.stockCode}}</td>
                        <td>{{s.stockName}}</td>
                        <td>{{s.openprice | number : 2}}</td>
                        <td>{{s.nowprice | number : 2}}</td>
                        <td>{{s.diffMoney | number : 2}}</td>
                        <td>{{s.diffRate}}</td>
                        <td>{{s.tradenum}}</td>
                        <td>{{s.tradeamount | number : 2}}</td>
                        <td>{{s.todaymax | number : 2}}</td>
                        <td>{{s.todaymin | number : 2}}</td>
                    </tr>
                </table>
                <div style="text-align: center">
                    <tm-pagination conf="page" style="display: inline-block"></tm-pagination>
                </div>
            </div>
            <div ng-hide="isTrue">
                <!--echarts k线图-->
                <div id="main" style="width: 800px;height:400px;margin-top: 50px"></div>
            </div>

        </div>
        <div class="panel-footer">
            <span>{{time|date:'yyyy-MM-dd HH:mm:ss'}}</span>
            <span style="float: right">&copy; 2021 SEA 版权所有</span>
        </div>
    </div>
</div>

<!-- 买入股票框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">买入股票</h4>
            </div>
            <div class="modal-body">
                <form class="form form-horizontal">
                    <div class="form-group ">
                        <div class="col-md-offset-3 col-md-5 ">
                            <input class="form-control " ng-model="codeOrName" placeholder="请输入股票代码/名称">
                        </div>
                        <a class="btn btn-success col-md-2 " ng-click="search()">查找</a>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3 col-md-offset-2">当前价： <span style="color: blue">{{stockNowPrice | number:2}}</span>
                        </div>
                        <div class="col-md-3">跌停： <span style="color: green">{{stock.fall | number:2}}</span></div>
                        <div class="col-md-3">涨停： <span style="color: red">{{stock.rise | number:2}}</span></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">价格</label>
                        <div class=" col-md-5 ">
                            <input class="form-control" ng-model="stock.nowprice">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group">
                            <label class="control-label col-md-4">最大可买(股)： <span style="color: blue">{{usermoney/stock.nowprice | maxNum}}</span></label>
                            <label class="control-label col-md-4">可用金额： <span style="color: blue">{{usermoney | number:2}}</span></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4">数量(手,1手=100股)</label>
                        <div class="col-md-4">
                            <input class="form-control" ng-model="buyNum">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-3">
                            <a class="btn btn-default" ng-click="btn1()">全仓</a>
                            <a class="btn btn-default" ng-click="btn2()">1/2</a>
                            <a class="btn btn-default" ng-click="btn3()">1/3</a>
                            <a class="btn btn-default" ng-click="btn4()">1/4</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-warning" ng-click="buy()">买入</button>
            </div>
        </div>
    </div>
</div>
<!-- 卖出股票框 -->
<div class="modal fade" id="sellModal" tabindex="-1" role="dialog" aria-labelledby="sellModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="sellModalLabel">卖出股票</h4>
            </div>
            <div class="modal-body">
                <form class="form form-horizontal">
                    <div class="form-group ">
                        <div class="col-md-offset-3 col-md-5 ">
                            <input class="form-control " ng-model="codeOrName" placeholder="请输入股票代码/名称">
                        </div>
                        <a class="btn btn-success col-md-2 " ng-click="searchSell()">查找</a>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3 col-md-offset-2">当前价： <span style="color: blue">{{stockNowPrice | number:2}}</span>
                        </div>
                        <div class="col-md-3">跌停： <span style="color: green">{{stock.fall | number:2}}</span></div>
                        <div class="col-md-3">涨停： <span style="color: red">{{stock.rise | number:2}}</span></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">价格</label>
                        <div class=" col-md-5 ">
                            <input class="form-control" ng-model="stock.nowprice">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group">
                            <label class="control-label col-md-4">最大可卖(股)： <span
                                    style="color: blue">{{canSellnum}}</span></label>
                            <label class="control-label col-md-4">持仓市值： <span
                                    style="color: blue">{{market | number:2}}</span></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4">数量(手,1手=100股)</label>
                        <div class="col-md-4">
                            <input class="form-control" ng-model="sellNum">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-3">
                            <a class="btn btn-default" ng-click="btnsell(1)">全仓</a>
                            <a class="btn btn-default" ng-click="btnsell(2)">1/2</a>
                            <a class="btn btn-default" ng-click="btnsell(3)">1/3</a>
                            <a class="btn btn-default" ng-click="btnsell(4)">1/4</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-warning" ng-click="sell()">卖出</button>
            </div>
        </div>
    </div>
</div>
<script>
    angular.module("app", ['ngCookies', 'pagination']).config(function ($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With']
    })
        //最大可买股票数量过滤器
        .filter('maxNum', function () {
            return function (num) {
                if (!isNaN(num)) {
                    return Math.floor(num / 100) * 100;
                }
            }
        })

        .controller("ctr", ["$scope", "$http", '$interval', '$timeout', function ($scope, $http, $interval, $timeout) {

            $scope.time = new Date(); //日期时间信息
            $scope.codeOrName = ""; //股票代码或名称
            $scope.usermoney;   //用户余额
            $scope.EntrustOrder = {};//委托订单信息
            $scope.isTrue = true;//行情列表与K线图切换

            // 引入分页的配置对象属
            $scope.reload = true;
            $scope.page = {
                currentPage: 1, // 代表当前页
                itemsPerPage: 4, // 代表每页的记录数
                totalItems: 100, // 代表总记录数
                perPageOptions: [4], // 代表分页的选项列表
                // 每次页码改变时此事件会自动调用 ( 窗体一加载完毕后就会被调用 )
                onChange: function () {
                    if (!$scope.reload) {
                        return;
                    }
                    $scope.loadStockList();
                    $scope.reload = false;
                    $timeout(function () {
                        $scope.reload = true;
                    }, 200);
                }
            };

            //显示日期时间
            $interval(function () {
                $scope.time = new Date();
            }, 1000);


            //分页加载股票信息
            var index = -1;
            $scope.loadStockList = function () {
                index = layer.load();
                $http.get("http://localhost:12000/stock/list?page=" + $scope.page.currentPage + "&pageSize=" + $scope.page.itemsPerPage, {
                    headers: {token: localStorage.getItem("token")}
                }).success(function (data) {
                    if (data.code == 200) {
                        $scope.page.totalItems = data.data.total;
                        $scope.slist = data.data.list;
                        layer.close(index);
                    }
                    if (data.code == 403) {
                        window.location.href = "/views/user/login.html";
                    }
                });
            };

            //打开买入股票框
            $scope.toBuy = function () {

                //验证用户是否实名认证
                $http.get("http://localhost:12000/user/checkCard", {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                    if (data.code == 200) {
                        //加载用户余额
                        $http.get("http://localhost:12000/user/loaduser", {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                            if (data.code == 200) {
                                $scope.usermoney = data.data.userMoney;
                                $('#myModal').modal('show');
                            }
                            if (data.code == 403) {
                                window.location.href = "/views/user/login.html";
                            }
                            if (data.code == 401) {
                                layer.msg(data.msg, {icon: 5});
                            }
                        });
                    }
                    if (data.code == 403) {
                        window.location.href = "/views/user/login.html";
                    }
                    if (data.code == 401) {
                        layer.msg(data.msg, {icon: 5});
                    }
                });
            };

            //打开卖出股票框
            $scope.toSell = function () {
                //验证用户是否实名认证
                $http.get("http://localhost:12000/user/checkCard", {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                    if (data.code == 200) {
                        $('#sellModal').modal('show');
                    }
                    if (data.code == 403) {
                        window.location.href = "/views/user/login.html";
                    }
                    if (data.code == 401) {
                        layer.msg(data.msg, {icon: 5});
                    }
                });

            };

            //查询单个股票信息
            $scope.search = function () {
                $scope.stockNowPrice = "";
                $scope.stock ={};
                $http.get("http://localhost:12000/stock/searchstock?codeOrName=" + $scope.codeOrName, {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                    if (data.code == 200) {
                        $scope.stockNowPrice = data.data.nowprice; //股票当前价
                        $scope.stock = data.data; //股票信息
                    }
                    if (data.code == 400) {
                        $scope.codeOrName = "";
                        layer.msg(data.msg, {icon: 5});
                    }
                    if (data.code == 403) {
                        window.location.href = "/views/user/login.html";
                    }

                });
            };

            //卖出框查询单个股票信息
            $scope.searchSell = function () {
                $scope.search();
                $http.get("http://localhost:12000/warehouse/loadstock?codeOrName=" + $scope.codeOrName, {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                    if (data.code == 400) {
                        //layer.msg(data.msg, {icon: 5});
                        $scope.market = 0;
                        $scope.canSellnum = 0
                    }
                    if (data.code == 200) {
                        $scope.market = data.data.market; //该股票市值canSellnum
                        $scope.canSellnum = data.data.canSellnum * 100;
                    }
                    if (data.code == 403) {
                        window.location.href = "/views/user/login.html";
                    }
                });
            };

            //买入股票
            $scope.buy = function () {
                if ($scope.codeOrName == null || $scope.codeOrName == "") {
                    layer.msg("您尚未选择股票", {icon: 5});
                    return;
                }
                if ($scope.stock.nowprice < $scope.stock.fall || $scope.stock.nowprice > $scope.stock.rise) {
                    layer.msg("委托价格不在跌停和涨停之间", {icon: 5});
                    return;
                }
                if ($scope.buyNum <= 0 || $scope.buyNum == null) {
                    layer.msg("数量不能为零", {icon: 5});
                    return;
                }
                if ($scope.buyNum * 100 > Math.floor($scope.usermoney / $scope.stock.nowprice )) {
                    layer.msg("数量不能超出最大购买数量", {icon: 5});
                    return;
                }
                $scope.EntrustOrder.oStockCode = $scope.stock.stockCode;
                $scope.EntrustOrder.oStockName = $scope.stock.stockName;
                $scope.EntrustOrder.oStockPrice = $scope.stock.nowprice;
                $scope.EntrustOrder.oStockNum = $scope.buyNum;
                //询问框
                layer.confirm('确定要买入吗？', {
                    btn: ['确定', '取消'],//按钮
                    title: '提示' //标题
                }, function () {
                    $http.post("http://localhost:12000/stocktrading/buystock", $scope.EntrustOrder,
                        {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                        if (data.code == 200) {
                            //清空模态款中内容
                            $scope.codeOrName = "";
                            $scope.stockNowPrice = "";
                            $scope.stock = "";
                            $scope.buyNum = "";
                            $('#myModal').modal('hide');
                            layer.msg(data.msg, {icon: 6});
                        }
                        if (data.code == 403) {
                            window.location.href = "/views/user/login.html";
                        }
                        if (data.code == 401) {
                            layer.msg(data.msg, {icon: 5});
                        }
                    })
                }, function () {
                    layer.closeAll(); //关闭询问框
                });
            };

            //卖出股票
            $scope.sell = function () {
                if ($scope.codeOrName == null || $scope.codeOrName == "") {
                    layer.msg("您尚未选择股票", {icon: 5});
                    return;
                }
                if ($scope.canSellnum <= 0) {
                    layer.msg("您的持仓中该股票可卖数量为零", {icon: 5});
                    return;
                }
                if ($scope.stock.nowprice < $scope.stock.fall || $scope.stock.nowprice > $scope.stock.rise) {
                    layer.msg("委托价格不在跌停和涨停之间", {icon: 5});
                    return;
                }
                if ($scope.sellNum <= 0 || $scope.sellNum == null) {
                    layer.msg("数量不能为零", {icon: 5});
                    return;
                }
                if ($scope.sellNum * 100 > $scope.canSellnum) {
                    layer.msg("数量不能超出最大卖出数量", {icon: 5});
                    return;
                }
                $scope.EntrustOrder.oStockCode = $scope.stock.stockCode;
                $scope.EntrustOrder.oStockName = $scope.stock.stockName;
                $scope.EntrustOrder.oStockPrice = $scope.stock.nowprice;
                $scope.EntrustOrder.oStockNum = $scope.sellNum;
                //询问框
                layer.confirm('确定要卖出吗？', {
                    btn: ['确定', '取消'],//按钮
                    title: '提示' //标题
                }, function () {
                    $http.post("http://localhost:12000/stocktrading/sellstock", $scope.EntrustOrder,
                        {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                        if (data.code == 200) {
                            //清空模态款中内容
                            $scope.codeOrName = "";
                            $scope.stockNowPrice = "";
                            $scope.stock = "";
                            $scope.sellNum = "";
                            $scope.canSellnum = "";
                            $scope.market = "";
                            $('#sellModal').modal('hide');
                            layer.msg(data.msg, {icon: 6});
                        }
                        if (data.code == 403) {
                            window.location.href = "/views/user/login.html";
                        }
                        if (data.code == 401) {
                            layer.msg(data.msg, {icon: 5});
                        }
                    })
                }, function () {
                    layer.closeAll(); //关闭询问框
                });
            };

            //去委托订单页面
            $scope.toOrder = function () {
                window.location.href = "/views/stock/order.html";
            };

            //去当前持仓页面
            $scope.toWarehouse = function () {
                window.location.href = "/views/stock/warehouse.html";
            };

            //调整数量
            $scope.btn1 = function () {
                $scope.buyNum = Math.floor($scope.usermoney / $scope.stock.nowprice / 100);
            };
            $scope.btn2 = function () {
                $scope.buyNum = Math.floor($scope.usermoney / $scope.stock.nowprice / 100 / 2);
            };
            $scope.btn3 = function () {
                $scope.buyNum = Math.floor($scope.usermoney / $scope.stock.nowprice / 100 / 3);
            };
            $scope.btn4 = function () {
                $scope.buyNum = Math.floor($scope.usermoney / $scope.stock.nowprice / 100 / 4);
            };

            //调整卖出数量
            $scope.btnsell = function (i) {
                $scope.sellNum = Math.floor($scope.canSellnum / 100 / i);
            };

            //注销
            $scope.logout = function () {
                $http.get("http://localhost:12000/user/logout", {headers: {token: localStorage.getItem("token")}}).success(function (data) {
                    if (data.code == 200) {
                        window.location.href = "/views/stock/warehouse.html";
                    }
                    if (data.code == 403) {
                        window.location.href = "/views/user/login.html";
                    }
                })
            };

            //行情列表与K线图切换
            $scope.change = function (b) {
                $scope.isTrue = b;
            };

            //查看我的信息
            $scope.toMy = function () {
                window.location.href = "/views/stock/myinfo.html";
            }


        }])
</script>
<script src="/js/echarts1.js"></script>
</body>
</html>